<template>
  <div class="mianjing">
    <div class="header">
        <div class="left">
            <van-tabs v-model="active" class="tabs" line-width="25px">
                <van-tab v-for="(item) in datas"  :key="item.path" :title="item.name" :to="item.path"></van-tab>
            </van-tabs>
        </div>
        <img src="@/assets/logo2.png" alt="">
    </div>
    
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name: 'MianJing',
    data() {
        return {
            active: 0,
            datas:[
                {path:'/main/mianjing/tuiJian' ,name:'推荐'},
                {path:'/main/mianjing/ZuiXin' ,name:'最新'},
            ]
        }
    },
    watch: {
        $route() {
            // console.log('update router')
            this.active = this.datas.findIndex(item => item.path === this.$route.path)
            // console.log(this.active)
        }
    },

}
</script>

<style long="less" scoped>
    .tabs{
        width: 100px;
        flex: 1;
    } 
    .header{
        display: flex;
    }
    .left{
        flex: 1;
    }
    img{
        width: 64px;
        height: 28px;
        margin-top: 5px;
    }

</style>